let svgTA = d3.select('#timeAnlysis').append('svg').attr('width', '100%').attr('height', '100%')

function getDays(year, month) {
    month -= 1
    a = 0
    if (((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) && month == 1) {
        a = 1
    }
    da = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    return da[month] + a
}
function drawTimeAnlysisChart() {
    // 清空画布
    svgTA.selectAll("*").remove()

    // 基础变量
    let width = 1000
    let height = 300
    let type = timeAnlysisType



    function getIndex(days) {
        let arr = []
        for (let i = 1; i <= days; i++) {
            arr.push(i)
        }
        return arr
    }

    // 画坐标轴
    let axisGroup = svgTA.append('g').attr('class', 'axisTA')
    let axisWidth = width - 70
    //轴高
    let axisHeight = height - 50
    let singleAxisWidth = 1
    let fontSize = 15
    let site = {
        x: 50,
        y: 25
    }
    let step = axisWidth / (axisType[type].axisAmount - 1)
    if (type != 'month') {
        for (let i = 0; i < axisType[type].axisAmount; i++) {
            axisGroup.append('path')
                .attr('d', `M ${site.x} ${site.y} l 0 ${axisHeight}`)
                .attr('stroke-width', singleAxisWidth)
                .attr('stroke', 'white')
                .transition()
                .duration(500)
                .attr('stroke', 'gray')
            axisGroup.append('text')
                .text(`${axisType[type].index[i]}`)
                .attr('font-size', fontSize)
                .attr('transform', `translate(${site.x - (axisType[type].fixed.x[i] * fontSize / 4)}, ${site.y + axisHeight + axisType[type].fixed.y * fontSize})`)
                .attr('fill', 'white')
                .transition()
                .duration(500)
                .attr('fill', 'black')
            site.x += step
        }
    } else {
        let monthAxisAmount = getDays(dateTime.year, dateTime.month)
        let monthAxisIndex = getIndex(monthAxisAmount)
        let fixed = {
            x: [1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
            y: 1
        }
        let stepM = axisWidth / (monthAxisAmount - 1)
        for (let i = 0; i < monthAxisAmount; i++) {
            axisGroup.append('path')
                .attr('d', `M ${site.x} ${site.y} l 0 ${axisHeight}`)
                .attr('stroke-width', singleAxisWidth)
                .attr('stroke', 'white')
                .transition()
                .duration(500)
                .attr('stroke', 'gray')
            axisGroup.append('text')
                .text(`${monthAxisIndex[i]}`)
                .attr('font-size', fontSize)
                .attr('transform', `translate(${site.x - (fixed.x[i] * fontSize / 4)}, ${site.y + axisHeight + fixed.y * fontSize})`)
                .attr('fill', 'white')
                .transition()
                .duration(500)
                .attr('fill', 'black')
            site.x += stepM
        }
    }
    svgTA.append('g').attr('id', 'line_svg')
    if (selectedSites.length != 0) {
        if (type == 'day')
            drawTime_hour();
        if (type == 'month')
            drawTime_day()
        if (type == 'week')
            drawTime_week()
        if (type == 'year')
            drawTime_month()
    }
}

function drawTime_hour() {
    var keys = Object.keys(Timedata['hour'])
    // console.log(Timedata['hour'], 'lxm')

    // var Yscale = d3.scaleLinear().domain([0, 500]).range([250, 0])

    var T_line = d3.select('#line_svg')
    T_line.selectAll('*').remove()
    var l_height = 200;
    var l_width = 960;

    var x_leftTop = 40;
    var y_leftTop = 25;

    var move_level = l_height / 6;
    var move_y = 10;
    var move_x = (l_width - 30) / 23;


    for (let i = 0; i < keys.length; i++) {
        g = T_line.append('g').attr('id', "L_" + keys[i])
        for (let h = 0; h < 23; h++) {
            g.append('path')
                .attr('d', `M ${(x_leftTop + move_x * h)} ${y_leftTop + move_level * (5 - Timedata['hour'][keys[i]][h][3]) + move_y * Timedata['hour'][keys[i]][h][2]} l${20} ${0}`)
                .attr('stroke-width', 5)
                .attr('stroke', 'white')
                .transition()
                .duration(500)
                .attr('stroke', 'gray')
            g.append('circle')
                .attr('cx', x_leftTop + move_x * h + 20)
                .attr('cy', y_leftTop + move_level * (5 - Timedata['hour'][keys[i]][h][3]) + move_y * Timedata['hour'][keys[i]][h][2])
                .attr('r', 2.5)
                .attr('fill', 'white')
                .transition()
                .duration(500)
                .attr('fill', 'gray')
            g.append('path')
                .attr('d', `M ${(x_leftTop + move_x * h + 20)} ${y_leftTop + move_level * (5 - Timedata['hour'][keys[i]][h][3]) + move_y * Timedata['hour'][keys[i]][h][2]} l${move_x - 20} ${(move_level * (5 - Timedata['hour'][keys[i]][h + 1][3]) + move_y * Timedata['hour'][keys[i]][h + 1][2] - (move_level * (5 - Timedata['hour'][keys[i]][h][3]) + move_y * Timedata['hour'][keys[i]][h][2]))}`)
                .attr('stroke-width', 5)
                .attr('stroke', 'white')
                .transition()
                .duration(500)
                .attr('stroke', 'gray')
            g.append('circle')
                .attr('cx', x_leftTop + move_x * (h + 1))
                .attr('cy', y_leftTop + move_level * (5 - Timedata['hour'][keys[i]][h + 1][3]) + move_y * Timedata['hour'][keys[i]][h + 1][2])
                .attr('r', 2.5)
                .attr('fill', 'white')
                .transition()
                .duration(500)
                .attr('fill', 'gray')

            if (h == 22) {
                g.append('path')
                    .attr('d', `M ${(x_leftTop + move_x * (h + 1))} ${y_leftTop + move_level * (5 - Timedata['hour'][keys[i]][h + 1][3]) + move_y * Timedata['hour'][keys[i]][h + 1][2]} l${20} ${0}`)
                    .attr('stroke-width', 5)
                    .attr('stroke', 'white')
                    .transition()
                    .duration(500)
                    .attr('stroke', 'gray')
            }


        }
        g.append('title').text(keys[i])

    }
}

function drawTime_day() {
    var keys = Object.keys(Timedata['day'])
    // console.log(Timedata['day'], 'lxm')

    // var Yscale = d3.scaleLinear().domain([0, 500]).range([250, 0])

    var T_line = d3.select('#line_svg')
    T_line.selectAll('*').remove()
    var l_height = 200;
    var l_width = 960;

    var x_leftTop = 40;
    var y_leftTop = 25;

    var year = parseInt(dateTime.year)
    var month = parseInt(dateTime.month)
    var days = getDays(year, month)

    var move_level = l_height / 6;
    var move_y = 10;
    var move_x = (l_width - 30) / (days - 1);


    for (let i = 0; i < keys.length; i++) {
        g = T_line.append('g')
        for (let h = 0; h < days - 1; h++) {
            g.append('path')
                .attr('d', `M ${(x_leftTop + move_x * h)} ${y_leftTop + move_level * (5 - Timedata['day'][keys[i]][h][3]) + move_y * Timedata['day'][keys[i]][h][2]} l${20} ${0}`)
                .attr('stroke-width', 5)
                .attr('stroke', 'white')
                .transition()
                .duration(500)
                .attr('stroke', 'gray')
            g.append('circle')
                .attr('cx', x_leftTop + move_x * h + 20)
                .attr('cy', y_leftTop + move_level * (5 - Timedata['day'][keys[i]][h][3]) + move_y * Timedata['day'][keys[i]][h][2])
                .attr('r', 2.5)
                .attr('fill', 'white')
                .transition()
                .duration(500)
                .attr('fill', 'gray')
            g.append('path')
                .attr('d', `M ${(x_leftTop + move_x * h + 20)} ${y_leftTop + move_level * (5 - Timedata['day'][keys[i]][h][3]) + move_y * Timedata['day'][keys[i]][h][2]} l${move_x - 20} ${(move_level * (5 - Timedata['day'][keys[i]][h + 1][3]) + move_y * Timedata['day'][keys[i]][h + 1][2] - (move_level * (5 - Timedata['day'][keys[i]][h][3]) + move_y * Timedata['day'][keys[i]][h][2]))}`)
                .attr('stroke-width', 5)
                .attr('stroke', 'white')
                .transition()
                .duration(500)
                .attr('stroke', 'gray')
            g.append('circle')
                .attr('cx', x_leftTop + move_x * (h + 1))
                .attr('cy', y_leftTop + move_level * (5 - Timedata['day'][keys[i]][h + 1][3]) + move_y * Timedata['day'][keys[i]][h + 1][2])
                .attr('r', 2.5)
                .attr('fill', 'white')
                .transition()
                .duration(500)
                .attr('fill', 'gray')

            if (h == days - 2) {
                g.append('path')
                    .attr('d', `M ${(x_leftTop + move_x * (h + 1))} ${y_leftTop + move_level * (5 - Timedata['day'][keys[i]][h + 1][3]) + move_y * Timedata['day'][keys[i]][h + 1][2]} l${20} ${0}`)
                    .attr('stroke-width', 5)
                    .attr('stroke', 'white')
                    .transition()
                    .duration(500)
                    .attr('stroke', 'gray')
            }


        }
        g.append('title').text(keys[i])
    }
}

function drawTime_week() {
    var keys = Object.keys(Timedata['week'])
    // console.log(Timedata['week'], 'lxm')

    // var Yscale = d3.scaleLinear().domain([0, 500]).range([250, 0])

    var T_line = d3.select('#line_svg')
    T_line.selectAll('*').remove()
    var l_height = 200;
    var l_width = 960;

    var x_leftTop = 40;
    var y_leftTop = 25;

    // var year = parseInt(dateTime.year)
    // var month = parseInt(dateTime.month)
    // var days = getDays(year, month)

    var move_level = l_height / 6;
    var move_y = 10;
    var move_x = (l_width - 30) / 6;


    for (let i = 0; i < keys.length; i++) {
        g = T_line.append('g')
        for (let h = 0; h < 6; h++) {
            g.append('path')
                .attr('d', `M ${(x_leftTop + move_x * h)} ${y_leftTop + move_level * (5 - Timedata['week'][keys[i]][h][3]) + move_y * Timedata['week'][keys[i]][h][2]} l${20} ${0}`)
                .attr('stroke-width', 5)
                .attr('stroke', 'white')
                .transition()
                .duration(500)
                .attr('stroke', 'gray')
            g.append('circle')
                .attr('cx', x_leftTop + move_x * h + 20)
                .attr('cy', y_leftTop + move_level * (5 - Timedata['week'][keys[i]][h][3]) + move_y * Timedata['week'][keys[i]][h][2])
                .attr('r', 2.5)
                .attr('fill', 'white')
                .transition()
                .duration(500)
                .attr('fill', 'gray')
            g.append('path')
                .attr('d', `M ${(x_leftTop + move_x * h + 20)} ${y_leftTop + move_level * (5 - Timedata['week'][keys[i]][h][3]) + move_y * Timedata['week'][keys[i]][h][2]} l${move_x - 20} ${(move_level * (5 - Timedata['week'][keys[i]][h + 1][3]) + move_y * Timedata['week'][keys[i]][h + 1][2] - (move_level * (5 - Timedata['week'][keys[i]][h][3]) + move_y * Timedata['week'][keys[i]][h][2]))}`)
                .attr('stroke-width', 5)
                .attr('stroke', 'white')
                .transition()
                .duration(500)
                .attr('stroke', 'gray')
            g.append('circle')
                .attr('cx', x_leftTop + move_x * (h + 1))
                .attr('cy', y_leftTop + move_level * (5 - Timedata['week'][keys[i]][h + 1][3]) + move_y * Timedata['week'][keys[i]][h + 1][2])
                .attr('r', 2.5)
                .attr('fill', 'white')
                .transition()
                .duration(500)
                .attr('fill', 'gray')

            if (h == 5) {
                g.append('path')
                    .attr('d', `M ${(x_leftTop + move_x * (h + 1))} ${y_leftTop + move_level * (5 - Timedata['week'][keys[i]][h + 1][3]) + move_y * Timedata['week'][keys[i]][h + 1][2]} l${20} ${0}`)
                    .attr('stroke-width', 5)
                    .attr('stroke', 'white')
                    .transition()
                    .duration(500)
                    .attr('stroke', 'gray')
            }
        }
        g.append('title').text(keys[i])
    }

}


function drawTime_month() {
    var keys = Object.keys(Timedata['month'])
    console.log(Timedata['month'], 'lxm')

    // var Yscale = d3.scaleLinear().domain([0, 500]).range([250, 0])

    var T_line = d3.select('#line_svg')
    T_line.selectAll('*').remove()
    var l_height = 200;
    var l_width = 960;

    var x_leftTop = 40;
    var y_leftTop = 25;

    // var year = parseInt(dateTime.year)
    // var month = parseInt(dateTime.month)
    // var days = getDays(year, month)

    var move_level = l_height / 6;
    var move_y = 10;
    var move_x = (l_width - 30) / 11;


    for (let i = 0; i < keys.length; i++) {
        g = T_line.append('g')
        for (let h = 0; h < 11; h++) {
            g.append('path')
                .attr('d', `M ${(x_leftTop + move_x * h)} ${y_leftTop + move_level * (5 - Timedata['month'][keys[i]][h][3]) + move_y * Timedata['month'][keys[i]][h][2]} l${20} ${0}`)
                .attr('stroke-width', 5)
                .attr('stroke', 'white')
                .transition()
                .duration(500)
                .attr('stroke', 'gray')
            g.append('circle')
                .attr('cx', x_leftTop + move_x * h + 20)
                .attr('cy', y_leftTop + move_level * (5 - Timedata['month'][keys[i]][h][3]) + move_y * Timedata['month'][keys[i]][h][2])
                .attr('r', 2.5)
                .attr('fill', 'white')
                .transition()
                .duration(500)
                .attr('fill', 'gray')
            g.append('path')
                .attr('d', `M ${(x_leftTop + move_x * h + 20)} ${y_leftTop + move_level * (5 - Timedata['month'][keys[i]][h][3]) + move_y * Timedata['month'][keys[i]][h][2]} l${move_x - 20} ${(move_level * (5 - Timedata['month'][keys[i]][h + 1][3]) + move_y * Timedata['month'][keys[i]][h + 1][2] - (move_level * (5 - Timedata['month'][keys[i]][h][3]) + move_y * Timedata['month'][keys[i]][h][2]))}`)
                .attr('stroke-width', 5)
                .attr('stroke', 'white')
                .transition()
                .duration(500)
                .attr('stroke', 'gray')
            g.append('circle')
                .attr('cx', x_leftTop + move_x * (h + 1))
                .attr('cy', y_leftTop + move_level * (5 - Timedata['month'][keys[i]][h + 1][3]) + move_y * Timedata['month'][keys[i]][h + 1][2])
                .attr('r', 2.5)
                .attr('fill', 'white')
                .transition()
                .duration(500)
                .attr('fill', 'gray')

            if (h == 10) {
                g.append('path')
                    .attr('d', `M ${(x_leftTop + move_x * (h + 1))} ${y_leftTop + move_level * (5 - Timedata['month'][keys[i]][h + 1][3]) + move_y * Timedata['month'][keys[i]][h + 1][2]} l${20} ${0}`)
                    .attr('stroke-width', 5)
                    .attr('stroke', 'white')
                    .transition()
                    .duration(500)
                    .attr('stroke', 'gray')
            }
        }
        g.append('title').text(keys[i])
    }

}
// function toolTip(g, key) {
//     g.on('mouseover', (d, i) => {
//         // console.log(Province_data[i])
//         tooltip.html(key)
//         tooltip.style('opacity', 1)
//         tooltip.style('left', d.x + 'px')
//         tooltip.style('top', (d.y + 50) + 'px')
//     })
//         .on('mousemove', (d, i) => {
//             tooltip.style('left', d.x + 'px')
//             tooltip.style('top', (d.y + 50) + 'px')
//         })
//         .on('mouseout', (d, i) => {
//             tooltip.style('left', bar_width + 'px')
//             tooltip.style('top', bar_height + 'px')
//             tooltip.style('opacity', 0)
//         })
// }